import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MemberPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('会员中心'),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          _topHeader(),
          _orderTitle(),
          _orderType(),
          _actionList()
        ],
      ),
    );
  }

  //头部
  Widget _topHeader() {
    return Container(
      width: ScreenUtil().setWidth(750),
      padding: EdgeInsets.all(20),
      // 背景图片
      decoration: new BoxDecoration(
          border: new Border.all(color: Color(0xFFFFFF00), width: 0.5),
          image: new DecorationImage(
              image: new NetworkImage(
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556111649180&di=0f9e95b86d729538bce89436ae52690d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201508%2F09%2F20150809173642_BXWdm.jpeg'),
              fit: BoxFit.cover)),
      child: Column(
        children: <Widget>[
          Container(
              margin: EdgeInsets.only(top: 30.0),
              child: new ClipOval(
                //圆形头像
                child: new Image.network(
                    'https://himg.bdimg.com/sys/portrait/item/29bd3258.jpg'),
              )),
          Container(
              margin: EdgeInsets.only(top: 10),
              child: Text(
                'mr.zhang',
                style: TextStyle(
                    fontSize: ScreenUtil().setSp(36), color: Colors.black54),
              ))
        ],
      ),
    );
  }

  //订单标题
  Widget _orderTitle() {
    return Container(
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(bottom: BorderSide(width: 1, color: Colors.black12))),
      child: ListTile(
        leading: Icon(Icons.list),
        title: Text('我的订单'),
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
    );
  }

  //订单列表
  Widget _orderType() {
    return Container(
      margin: EdgeInsets.only(top: 5),
      width: ScreenUtil().setWidth(750),
      height: ScreenUtil().setHeight(150),
      padding: EdgeInsets.only(top: 20),
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(Icons.account_balance_wallet, size: 30),
                Text('待付款')
              ],
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(Icons.query_builder, size: 30),
                Text('待发货')
              ],
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(Icons.directions_car, size: 30),
                Text('待收货')
              ],
            ),
          ),
          Container(
            width: ScreenUtil().setWidth(187),
            child: Column(
              children: <Widget>[
                Icon(Icons.content_paste, size: 30),
                Text('待评价')
              ],
            ),
          ),
        ],
      ),
    );
  }

  //通用Listtitle,传入两个参数：标题和图标
  Widget _myListTitle(String title, icon) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          border: Border(bottom: BorderSide(width: 1, color: Colors.black12))),
      child: ListTile(
        leading: icon,
        title: Text(title),
        trailing: Icon(Icons.keyboard_arrow_right),
      ),
    );
  }

  //使用通用Listtitle多个组合成列表
  Widget _actionList() {
    return Container(
      margin: EdgeInsets.only(top: 10),
      child: Column(
        children: <Widget>[
          _myListTitle('领取优惠券', Icon(Icons.library_books)),
          _myListTitle('已领取优惠券', Icon(Icons.book)),
          _myListTitle('地址管理', Icon(Icons.add_location)),
          _myListTitle('客服电话', Icon(Icons.phone)),
          _myListTitle('关于我们', Icon(Icons.account_balance)),
        ],
      ),
    );
  }
}
